<template>
  <div class="container">
    <Breadcrumb :items="['menu.problem', 'menu.problem.create']"/>
    <a-form ref="formRef" layout="vertical" :model="formData">
      <a-space direction="vertical" :size="16" style="margin-bottom: 30px">
        <a-card class="general-card" :title="$t('problem.create.base')">
          <a-form :layout="layout" :model="formModel">
            <a-form-item field="title" :label="$t('problem.create.form.title')" required>
              <a-input :style="{width:'30%'}" v-model="formModel.title"
                       :placeholder="$t('problem.create.form.title.placeholder')" :max-length="10" show-word-limit/>
            </a-form-item>
            <a-form-item field="introduction" :label="$t('problem.create.form.introduction')" required>
              <MavonEditor
                :value="formModel.introduction"
                :on-change="changeIntroduction"
                style="width: 90%; min-height: 400px"
                :placeholder="$t('problem.create.form.introduction.placeholder')"/>
            </a-form-item>
          </a-form>
        </a-card>
      </a-space>

      <a-space direction="vertical" :size="16" style="margin-bottom: 30px">
        <a-card class="general-card" :title="$t('problem.create.parameter')">
          <a-form :layout="layout" :model="formModel">
            <a-form-item field="difficulty" :label="$t('problem.create.form.difficulty')" required>
              <a-radio-group type="button" v-model="formModel.difficulty">
                <a-radio :value="1" style="color: green">{{ $t('problem.info.form.difficulty.easy') }}</a-radio>
                <a-radio :value="2" style="color: gold">{{ $t('problem.info.form.difficulty.mid') }}</a-radio>
                <a-radio :value="3" style="color: red">{{ $t('problem.info.form.difficulty.difficult') }}</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item field="isPublic" :label="$t('problem.create.form.isPublic')" required>
              <a-radio-group v-model="formModel.isPublic">
                <a-radio :value="0">{{ $t('problem.create.form.isPublic.no') }}</a-radio>
                <a-radio :value="1">{{ $t('problem.create.form.isPublic.is') }}</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item field="tags" :label="$t('problem.create.form.tags')" required>
              <a-button type="primary" @click="selectHandleClick">
                <template #icon>
                  <icon-plus/>
                </template>
                {{formModel.tags.length != 0 ? $t('problem.create.form.tags.done') : $t('problem.create.form.tags.do') }}
              </a-button>
            </a-form-item>
          </a-form>
          <a-form :layout="inline" :model="formModel">
            <a-form-item field="memoryLimit" :label="$t('problem.create.form.memoryLimit')" required>
              <a-input v-model="formModel.memoryLimit" :placeholder="$t('problem.create.form.memoryLimit.placeholder')">
                <template #append>
                  {{ $t('problem.create.form.memoryLimit.mb') }}
                </template>
              </a-input>
            </a-form-item>
            <a-form-item field="timeLimit" :label="$t('problem.create.form.timeLimit')" required>
              <a-input v-model="formModel.timeLimit" :placeholder="$t('problem.create.form.timeLimit.placeholder')">
                <template #append>
                  {{ $t('problem.create.form.timeLimit.s') }}
                </template>
              </a-input>
            </a-form-item>
          </a-form>
        </a-card>
      </a-space>
      <a-space direction="vertical" :size="16" style="margin-bottom: 30px">
        <a-card class="general-card" :title="$t('problem.create.sample')">
          <a-form :layout="layout" :model="formModel">
            <a-form-item field="inputSample" :label="$t('problem.create.form.inputSample')" required>
              <a-textarea v-model="formModel.inputSample"
                          :placeholder="$t('problem.create.form.inputSample.placeholder')"/>
            </a-form-item>
            <a-form-item field="outputSample" :label="$t('problem.create.form.outputSample')" required>
              <a-textarea v-model="formModel.outputSample"
                          :placeholder="$t('problem.create.form.outputSample.placeholder')"/>
            </a-form-item>
            <a-form-item field="problemExplain" :label="$t('problem.create.form.problemExplain')" required>
              <a-textarea v-model="formModel.problemExplain"
                          :placeholder="$t('problem.create.form.problemExplain.placeholder')"/>
            </a-form-item>
          </a-form>
        </a-card>
      </a-space>
      <a-space direction="vertical" :size="16">
        <a-card class="general-card" :title="$t('problem.create.submit')">
          <a-button type="primary" @click="submitProblem()">{{ $t('problem.create.submit.submit') }}</a-button>
          <a-button @click="reset()">{{$t('problem.create.submit.reset')}}</a-button>
        </a-card>
      </a-space>
    </a-form>
    <a-modal style="z-index: 2000" width="700px" v-model:visible="selectTagVisable" title="选择题目标签"
             @cancel="selectHandleCancel"
             @before-ok="selectHandleBeforeOk">
      <div style="height: 600px;width: 600px;">
        <div v-for="(item,index) in tagTree" :key="index">
          <div style="padding-bottom: 20px;">
            <div style="line-height: 5px;">
              <div style="font-size: 20px;">{{ item.name }}</div>
              <a-divider/>
            </div>
            <a-checkbox-group v-model="formModel.tags">
              <a-checkbox v-for="(child,index) in item.children" :key="index"
                          :value="child.id">{{ child.name }}
              </a-checkbox>
            </a-checkbox-group>
          </div>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
import {FormInstance} from '@arco-design/web-vue/es/form';
import useLoading from '@/hooks/loading';
import {generateSaveProblem, saveProblemInfo, SaveProblemDto, TagTreeShowVo, getTagTree, addTag} from '@/api/problem';
import {Message} from "@arco-design/web-vue";
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

const formData = ref({});
const formRef = ref<FormInstance>();
const {loading, setLoading} = useLoading();
const layout = ref('vertical')
const inline = ref('inline');
const horizontal = ref('horizontal')
const uploadRef = ref();
const selectTagVisable = ref(false);
const tagTree = ref<TagTreeShowVo[]>(new Array(7).fill({}));
const { t } = useI18n();
const router = useRouter();

const generateFormModel = (): SaveProblemDto => {
  return generateSaveProblem();
};
const formModel = ref(generateFormModel());

const selectHandleCancel = () => {
  selectTagVisable.value = false;
};

const selectHandleClick = () => {
  selectTagVisable.value = true
};

const getTreeTagList = async () => {
  try {
    const {data} = await getTagTree();
    tagTree.value = data;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
}
getTreeTagList();

const selectHandleBeforeOk = (done) => {
  done();
  selectTagVisable.value = false;
};

const changeIntroduction = (v:string) =>{
  formModel.value.introduction = v
}

const submitProblem = async () => {
  try {
    const res = await saveProblemInfo(formModel.value);
    Message.success(t('problem.create.submit.success'));
    router.push({
      name: 'ProblemInfo',
    });
  } catch (err) {
    Message.success(t('problem.create.submit.fail'));
    throw err;
  }
}

const reset = () => {
  formModel.value = generateFormModel()
}

</script>

<script lang="ts">
export default {
  name: 'CreateProblem',
};
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 40px 20px;
  overflow: hidden;
}

.actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  padding: 14px 20px 14px 0;
  background: var(--color-bg-2);
  text-align: right;
}

.general-card {
  border-radius: 4px;
  border: none;

  & > .arco-card-header {
    height: auto;
    padding: 20px;
    border: none;
  }

  & > .arco-card-body {
    padding: 0 20px 20px 20px;
  }
}


</style>